<template>
  <div class="budgetBox">
    <table class="input" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
      <thead>
        <tr class="title">
          <th>经费投入预算</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="label">
          <td>科目</td>
          <td>金额（万元）</td>
        </tr>
        <tr v-for="(item, index) in data.table1" :key="index">
          <td>
            <span v-html="`&emsp;`.repeat(Number(item.subject))"></span>{{ item.subjectName }}
          </td>
          <td>
            <input
              :disabled="title.includes('详情')"
              type="text"
              @input="item.amount = NumberCheck(item.amount)"
              :maxlength="10"
              v-model="item.amount"
            />
          </td>
        </tr>
        <tr>
          <td>合计</td>
          <td>
            <input disabled type="text" min="0" placeholder="自动计算" :value="data.totalNum1" />
          </td>
        </tr>
        <tr v-for="(item, index) in data.table2.length - data.table1.length" :key="index">
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <table class="output" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
      <thead>
        <tr class="title">
          <th>经费支出预算</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="label">
          <td>科目</td>
          <td>金额（万元）</td>
        </tr>
        <tr v-for="(item, index) in data.table2" :key="index">
          <td>
            <span v-html="`&emsp;`.repeat(Number(item.subject))"></span>{{ item.subjectName }}
          </td>
          <td>
            <input
              :disabled="title.includes('详情')"
              type="text"
              @input="item.amount = NumberCheck(item.amount)"
              v-model="item.amount"
              :maxlength="10"
            />
          </td>
        </tr>
        <tr>
          <td>合计</td>
          <td>
            <input disabled type="text" min="0" placeholder="自动计算" :value="data.totalNum2" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue'
import tableJson from './tableBudeget.json'
import { store } from '@/store'
import { NumberCheck } from '@/utils/utils'

export default {
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup() {
    const input = ref()
    const data = reactive({
      table1: [{ subjectName: '', amount: '', subject: '' }],
      table2: [{ subjectName: '', amount: '', subject: '' }],
      totalNum1: 0,
      totalNum2: 0,
    })
    //分开table数据
    const hadTable = () => {
      data.table1 = []
      data.table2 = []
      tableJson.contractBudgetList.forEach((e: any) => {
        // console.log(e,'经费列表');
        if (e.costCategory == '1') {
          data.totalNum1 += Number(e.amount)
          data.table1.push(e)
        } else {
          data.table2.push(e)
          data.totalNum2 += Number(e.amount)
        }
      })
      data.totalNum1.toFixed(2)
      data.totalNum2.toFixed(2)
    }
    onMounted(() => {
      Object.assign(
        tableJson.contractBudgetList,
        JSON.parse(JSON.stringify(store.state.projectCenter.contractForm.contractBudgetList)) 
      )
      console.log(tableJson.contractBudgetList, '合并之后tableJson.contractBudgetList')
      hadTable()
      store.state.projectCenter.contractForm.contractBudgetList = tableJson.contractBudgetList
    })
    watch(
      () => data.table1,
      () => {
        data.totalNum1 = 0
        data.table1.forEach((e: any) => {
          data.totalNum1 += Number(e.amount)
        })
        data.totalNum1 = data.totalNum1.toFixed(3) as any
      },
      { deep: true }
    )
    watch(
      () => data.table2,
      () => {
        data.totalNum2 = 0
        data.table2.forEach((e: any) => {
          data.totalNum2 += Number(e.amount)
        })
        data.totalNum2 = data.totalNum2.toFixed(3) as any
      },
      { deep: true }
    )
    onBeforeUnmount(() => {
      console.log('预算经费表格卸载了')
      console.log(
        store.state.projectCenter.contractForm,
        'store.state.projectCenter.contractForm.contractBudgetList'
      )
      tableJson.contractBudgetList.forEach((item) => {
        item.amount = '0'
      })
    })
    return {
      input,
      data,
      hadTable,
      NumberCheck,
    }
  },
}
</script>

<style scoped lang="scss">
th {
  height: 25px;
}
.title {
  text-align: center;
  line-height: 36px;
  background-color: #f0f2f5;
  th {
    width: 200px;
  }
  th:nth-child(3) {
    width: 250px;
  }
}
.label {
  text-align: center;
  line-height: 28px;
}

input {
  outline: none;
  width: 90%;
  margin: 0 5%;
}
.budgetBox {
  margin: 0 10%;
  width: 100%;
  background-color: #492222;
  table {
    float: left;
    line-height: 30px;
    td {
      height: 34px;
    }
  }
  justify-content: center;
  .output {
    th:first-child {
      width: 300px;
    }
  }
}
</style>
